/*
 * @Author: hongbin
 * @Date: 2021-11-24 22:02:15
 * @LastEditors: hongbin
 * @LastEditTime: 2021-11-26 13:27:31
 * @Description:子弹
 */
import { FC, ReactElement, useEffect } from "react";
interface IProps {}

function bulletSvg() {
  const svg = document.createElement("img");
  svg.src = "/bullets.svg";
  svg.className = "bulletAbsolute";
  return svg;
}
const doesNotWordPath = ["/canvas"];

const Bullet: FC<IProps> = (): ReactElement => {
  useEffect(() => {
    const { offsetWidth } = document.body;

    document.addEventListener("mousedown", e => {
      const { url } = history.state;
      if (!doesNotWordPath.includes(url)) {
        if (offsetWidth < 750) {
          if (e.pageX > offsetWidth - 20) return;
          const vNode = document.createElement("div");
          vNode.className = "heartWrap";
          Array.from(new Array(5), (_, index) => {
            const heart = document.createElement("div");
            heart.className = `heart late${index}`;
            heart.style.background = "#" + Math.random().toString(16).slice(-6);
            vNode.appendChild(heart);
          });
          document.body.appendChild(vNode);

          vNode.style.top = e.pageY - 20 + "px";
          vNode.style.left = e.pageX - 10 + "px";
          setTimeout(() => {
            document.body.removeChild(vNode);
          }, 2000);
        } else {
          const svg = bulletSvg();
          document.body.appendChild(svg);
          svg.style.top = e.pageY - 16 + "px";
          svg.style.left = e.pageX + 8 + "px";
          svg.style.animation = "bullet 2s linear";
          setTimeout(() => {
            document.body.removeChild(svg);
          }, 2000);
        }
      }
    });
  }, []);

  return <div></div>;
};

export default Bullet;

const Icon = (
  <svg
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="1274"
    width="32"
    height="32"
  >
    <path
      d="M1002.68 490.68H21.336c-11.782 0-21.328 9.546-21.328 21.328v127.998c0 11.782 9.546 21.312 21.328 21.312H1002.68c11.75 0 21.312-9.532 21.312-21.312v-127.998c0-11.782-9.562-21.328-21.312-21.328z"
      fill="#965353"
      p-id="1275"
    ></path>
    <path
      d="M829.746 267.808l-42.688-85.342a21.31 21.31 0 0 0-38.124 0l-42.688 85.342a21.016 21.016 0 0 0-2.25 9.532v127.998c0 11.78 9.562 21.342 21.312 21.342h85.376c11.75 0 21.312-9.562 21.312-21.342V277.34c0-3.312-0.75-6.578-2.25-9.532z"
      fill="#F6BB42"
      p-id="1276"
    ></path>
    <path
      d="M787.058 182.466a21.31 21.31 0 0 0-38.124 0l-42.688 85.342a21.016 21.016 0 0 0-2.25 9.532h128c0-3.312-0.75-6.578-2.25-9.532l-42.688-85.342z"
      fill="#FC6E51"
      p-id="1277"
    ></path>
    <path
      d="M851.058 438.462l-21.312-42.656a21.328 21.328 0 0 0-19.062-11.796h-85.376a21.328 21.328 0 0 0-19.062 11.796l-21.312 42.656a21.124 21.124 0 0 0-2.25 9.546v383.994a21.3 21.3 0 0 0 21.312 21.312h128a21.3 21.3 0 0 0 21.312-21.312V448.008c0-3.312-0.75-6.578-2.25-9.546z"
      fill="#FFCE54"
      p-id="1278"
    ></path>
    <path
      d="M851.058 438.462l-19.062-38.156V277.34c0-3.312-0.75-6.578-2.25-9.532l-42.688-85.342a21.31 21.31 0 0 0-29.75-8.906 21.306 21.306 0 0 1 8.438 8.906l42.688 85.342c1.438 2.954 2.25 6.218 2.25 9.532v122.966l19.062 38.156a21.124 21.124 0 0 1 2.25 9.546v383.994c0 11.782-9.562 21.312-21.312 21.312h21.312a21.3 21.3 0 0 0 21.312-21.312V448.008c0-3.312-0.75-6.578-2.25-9.546z"
      fill="#FFFFFF"
      opacity=".2"
      p-id="1279"
    ></path>
    <path
      d="M682.684 725.316h170.624v42.686h-170.624zM853.308 853.314h-170.624c-11.812 0-21.376-9.532-21.376-21.312s9.562-21.312 21.376-21.312h170.624c11.808 0 21.372 9.532 21.372 21.312s-9.562 21.312-21.372 21.312z"
      fill="#F6BB42"
      p-id="1280"
    ></path>
    <path
      d="M703.996 597.318h-21.312c-11.812 0-21.376-9.532-21.376-21.312s9.562-21.312 21.376-21.312h21.312c11.782 0 21.312 9.532 21.312 21.312s-9.53 21.312-21.312 21.312zM853.308 597.318h-21.312c-11.782 0-21.312-9.532-21.312-21.312s9.532-21.312 21.312-21.312h21.312c11.808 0 21.372 9.532 21.372 21.312s-9.562 21.312-21.372 21.312z"
      fill="#656D78"
      p-id="1281"
    ></path>
    <path
      d="M573.75 267.808l-42.672-85.342a21.334 21.334 0 0 0-38.156 0l-42.67 85.342a21.226 21.226 0 0 0-2.25 9.532v127.998c0 11.78 9.546 21.342 21.328 21.342h85.358c11.75 0 21.312-9.562 21.312-21.342V277.34c0-3.312-0.75-6.578-2.25-9.532z"
      fill="#F6BB42"
      p-id="1282"
    ></path>
    <path
      d="M531.078 182.466a21.334 21.334 0 0 0-38.156 0l-42.67 85.342a21.226 21.226 0 0 0-2.25 9.532h128c0-3.312-0.75-6.578-2.25-9.532l-42.674-85.342z"
      fill="#FC6E51"
      p-id="1283"
    ></path>
    <path
      d="M595.062 438.462l-21.312-42.656a21.328 21.328 0 0 0-19.062-11.796h-85.358a21.32 21.32 0 0 0-19.078 11.796l-21.328 42.656a21.334 21.334 0 0 0-2.25 9.546v383.994c0 11.782 9.546 21.312 21.328 21.312h128a21.3 21.3 0 0 0 21.312-21.312V448.008a21.152 21.152 0 0 0-2.252-9.546z"
      fill="#FFCE54"
      p-id="1284"
    ></path>
    <path
      d="M595.062 438.462L576 400.306V277.34c0-3.312-0.75-6.578-2.25-9.532l-42.672-85.342A21.334 21.334 0 0 0 512 170.684c-3.828 0-7.484 1.032-10.672 2.876a21.268 21.268 0 0 1 8.422 8.906l42.688 85.342c1.438 2.954 2.25 6.218 2.25 9.532v122.966l19.062 38.156a21.124 21.124 0 0 1 2.25 9.546v383.994c0 11.782-9.562 21.312-21.312 21.312H576a21.3 21.3 0 0 0 21.312-21.312V448.008c0-3.312-0.75-6.578-2.25-9.546z"
      fill="#FFFFFF"
      opacity=".2"
      p-id="1285"
    ></path>
    <path
      d="M426.672 725.316h170.64v42.686h-170.64zM597.312 853.314h-170.64c-11.78 0-21.342-9.532-21.342-21.312s9.562-21.312 21.342-21.312h170.64c11.812 0 21.376 9.532 21.376 21.312s-9.564 21.312-21.376 21.312z"
      fill="#F6BB42"
      p-id="1286"
    ></path>
    <path
      d="M448 597.318h-21.328c-11.78 0-21.342-9.532-21.342-21.312s9.562-21.312 21.342-21.312H448c11.782 0 21.328 9.532 21.328 21.312s-9.546 21.312-21.328 21.312zM597.312 597.318H576c-11.782 0-21.312-9.532-21.312-21.312s9.532-21.312 21.312-21.312h21.312c11.812 0 21.376 9.532 21.376 21.312s-9.564 21.312-21.376 21.312z"
      fill="#656D78"
      p-id="1287"
    ></path>
    <path
      d="M317.752 267.808l-42.67-85.342a21.334 21.334 0 0 0-38.156 0l-42.672 85.342a21.226 21.226 0 0 0-2.25 9.532v127.998c0 11.78 9.546 21.342 21.328 21.342h85.342c11.78 0 21.328-9.562 21.328-21.342V277.34c0-3.312-0.764-6.578-2.25-9.532z"
      fill="#F6BB42"
      p-id="1288"
    ></path>
    <path
      d="M275.082 182.466a21.334 21.334 0 0 0-38.156 0l-42.672 85.342a21.226 21.226 0 0 0-2.25 9.532h127.998c0-3.312-0.766-6.578-2.25-9.532l-42.67-85.342z"
      fill="#FC6E51"
      p-id="1289"
    ></path>
    <path
      d="M339.082 438.462l-21.328-42.656a21.32 21.32 0 0 0-19.078-11.796h-85.342a21.32 21.32 0 0 0-19.078 11.796l-21.328 42.656a21.334 21.334 0 0 0-2.25 9.546v383.994c0 11.782 9.546 21.312 21.328 21.312h127.998c11.782 0 21.328-9.532 21.328-21.312V448.008c0-3.312-0.766-6.578-2.25-9.546z"
      fill="#FFCE54"
      p-id="1290"
    ></path>
    <path
      d="M339.082 438.462l-19.078-38.156V277.34c0-3.312-0.766-6.578-2.25-9.532l-42.67-85.342a21.334 21.334 0 0 0-19.078-11.782c-3.828 0-7.484 1.032-10.67 2.876a21.264 21.264 0 0 1 8.42 8.906l42.672 85.342a21.438 21.438 0 0 1 2.25 9.532v122.966l19.078 38.156a21.334 21.334 0 0 1 2.25 9.546v383.994c0 11.782-9.546 21.312-21.328 21.312h21.328c11.782 0 21.328-9.532 21.328-21.312V448.008a21.362 21.362 0 0 0-2.252-9.546z"
      fill="#FFFFFF"
      opacity=".2"
      p-id="1291"
    ></path>
    <path
      d="M170.678 725.316h170.654v42.686H170.678zM341.332 853.314H170.678c-11.782 0-21.344-9.532-21.344-21.312s9.562-21.312 21.344-21.312h170.654c11.782 0 21.342 9.532 21.342 21.312s-9.562 21.312-21.342 21.312z"
      fill="#F6BB42"
      p-id="1292"
    ></path>
    <path
      d="M192.006 597.318H170.678c-11.782 0-21.344-9.532-21.344-21.312s9.562-21.312 21.344-21.312h21.328c11.78 0 21.328 9.532 21.328 21.312s-9.548 21.312-21.328 21.312zM341.332 597.318h-21.328c-11.782 0-21.328-9.532-21.328-21.312s9.546-21.312 21.328-21.312h21.328c11.782 0 21.342 9.532 21.342 21.312s-9.562 21.312-21.342 21.312z"
      fill="#656D78"
      p-id="1293"
    ></path>
  </svg>
);
